import React,{Component} from 'react';
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
// 动画
import {CSSTransition} from 'react-transition-group'
import {actionCreator} from "./store";
import {
    HeaderWapper,
    Logo,
    Nav,
    NavItem,
    NavSreach,
    Addition,
    Button,
    SearchWarpper,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoItem,
    SearchInfoList
} from './style'


class Header extends Component{
    render(){
        const {focused,handleInputFocus,handleInputBlue,list,login} = this.props;
        return(
            <HeaderWapper>
                <Link to='/'>
                    <Logo/>
                </Link>
                <Nav>
                    <NavItem className='left active'>首页</NavItem>
                    <NavItem className='left'>下载App</NavItem>
                    {login? <NavItem className='right'>退出</NavItem>: <Link to='/login'><NavItem className='right'>登录</NavItem></Link>}
                    <NavItem className='right'><i className="iconfont">&#xeb4e;</i></NavItem>
                    {/*搜索动画*/}
                    <SearchWarpper>
                        <CSSTransition timeout={200} in={focused} classNames='slide'>
                            <NavSreach
                                className={focused?'focused':''}
                                onFocus={()=>handleInputFocus(list)}
                                onBlur={handleInputBlue}
                            >
                            </NavSreach>
                        </CSSTransition>

                        <i  className={focused?'focused iconfont zoom':'iconfont zoom'}>&#xe64e;</i>
                        {this.getListArea()}
                    </SearchWarpper>
                </Nav>
                <Addition>
                    <Button className='wrtiing'><i className="iconfont">&#xe609;</i>写文章</Button>
                    <Button className='reg'>注册</Button>

                </Addition>
            </HeaderWapper>
        )
    };
    getListArea(){
        const {focused,list,page,mouseIn,totalPage,handleMouseEnter,handleMouseleave,handlePageChange} = this.props;
        const newlist = list.toJS()
        let pageList = [];
        if(newlist.length){
            for(let i = page*8;i<(page+1)*8;i++){
                pageList.push(
                    <SearchInfoItem key={newlist[i]}>{newlist[i]}</SearchInfoItem>
                )
            }
        }
        if(focused || mouseIn){
            return ( <SearchInfo
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseleave}
            >
                <SearchInfoTitle>热门搜索
                    <SearchInfoSwitch onClick={()=>handlePageChange(page,totalPage,this.spinIcon)}>
                        <i  ref={(icon)=>{this.spinIcon = icon}}  className="iconfont spin">&#xe851;</i>
                        换一换
                    </SearchInfoSwitch>
                </SearchInfoTitle>
                <SearchInfoList>
                    {pageList}
                </SearchInfoList>
            </SearchInfo>)
        }else {
            return null
        }
    }
}

const  mapStateToProps = (state)=>{
    return {
        //state.get('header').get('focused')
        focused:state.getIn(['header','focused']),
        list:state.getIn(['header','list']),
        page:state.getIn(['header','page']),
        mouseIn:state.getIn(['header','mouseIn']),
        totalPage:state.getIn(['header','totalPage']),
        login:state.getIn(['login','login'])
    }
}

const  mapDispathToProps = (dispatch)=>{
    return {
        handleInputFocus(list){
            if(list.size===0){
                dispatch(actionCreator.getList());
            }

            dispatch(actionCreator.sreachRocus());
        },
        handleInputBlue(){

            dispatch(actionCreator.sreachBlur());
        },
        handleMouseEnter(){
            dispatch(actionCreator.mouseEnter())
        },
        handleMouseleave(){
            dispatch(actionCreator.mouseLeave())
        },
        handlePageChange(page,totalPage,spin){
            let originAngle =  spin.style.transform.replace(/[^0-9]/ig,'');
            if(originAngle){
                originAngle=parseInt(originAngle,10)
            }else {
                originAngle=0
            }
            spin.style.transform = 'rotate('+(originAngle+360)+'deg)';
            if(page<=totalPage){
                dispatch(actionCreator.changePage(page+1))
            }else{
                dispatch(actionCreator.changePage(1))
            }


        }
    }
};
export default connect(mapStateToProps,mapDispathToProps)(Header)